<template>
  <section class="list_filter">
    <el-row type="flex" class="filter_item">
      <!-- 价格 -->
      <el-col :span="5">
        <el-row class="price_title" type="flex" justify="space-between">
          <span>价格</span>
          <span>0-{{filterQuery.price}}</span>
        </el-row>
        <el-slider @change="handlePriceChange" v-model="filterQuery.price" :max="4000"></el-slider>
      </el-col>

      <!-- 住宿等级 -->
      <el-col :span="4">
        <div class="item_title">住宿等级</div>
        <el-dropdown placement="bottom-start">
          <span class="el-dropdown-link">
            <span>{{levelChoose}}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <el-dropdown-menu slot="dropdown" v-if="hotelOptions">
            <el-dropdown-item
              @click.native="item.check = !item.check"
              style="width:100px"
              v-for="item in hotelOptions.levels"
              :key="item.id"
            >
              <!-- iconright-1  选中样式 -->
              <i :class="item.check ? 'iconright-1' : 'iconcircle'" class="iconfont"></i>
              <span>{{item.name}}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>

      <!-- 住宿类型 -->
      <el-col :span="4">
        <div class="item_title">住宿类型</div>
        <el-dropdown>
          <span class="el-dropdown-link">
            <span>{{typeChoose}}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <el-dropdown-menu slot="dropdown" v-if="hotelOptions">
            <el-dropdown-item
              @click.native="item.check = !item.check"
              style="width:150px"
              v-for="item in hotelOptions.types"
              :key="item.id"
            >
              <!-- iconright-1  选中样式 -->
              <i :class="item.check ? 'iconright-1' : 'iconcircle'" class="iconfont"></i>
              <span>{{item.name}}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>

      <!-- 酒店设施 -->
      <el-col :span="4">
        <div class="item_title">酒店设施</div>
        <el-dropdown>
          <span class="el-dropdown-link">
            <span>{{assetsChoose}}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <el-dropdown-menu slot="dropdown" v-if="hotelOptions">
            <el-dropdown-item
              @click.native="item.check = !item.check"
              style="width:150px"
              v-for="item in hotelOptions.assets"
              :key="item.id"
            >
              <!-- iconright-1  选中样式 -->
              <i :class="item.check ? 'iconright-1' : 'iconcircle'" class="iconfont"></i>
              <span>{{item.name}}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>

      <!-- 酒店品牌 -->
      <el-col :span="4">
        <div class="item_title">酒店品牌</div>
        <el-dropdown>
          <span class="el-dropdown-link">
            <span>{{brandsChoose}}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <el-dropdown-menu slot="dropdown" v-if="hotelOptions">
            <div class="el-dropdown-menu-box" style="overflow:auto;max-height:250px">
              <el-dropdown-item
                @click.native="item.check = !item.check"
                style="width:170px"
                v-for="item in hotelOptions.brands"
                :key="item.id"
              >
                <!-- iconright-1  选中样式 -->
                <i :class="item.check ? 'iconright-1' : 'iconcircle'" class="iconfont"></i>
                <span>{{item.name}}</span>
              </el-dropdown-item>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>

      <!-- 撤销条件 -->
      <el-col :span="3" class="cancel_filter">
        <el-button size="small" @click="cancelFilter" type="primary">撤销条件</el-button>
      </el-col>
    </el-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
      // 筛选参数
      filterQuery: {
        // 价格
        price: 4000,
        // 住宿等级、
        hotellevel: [],
        // 住宿类型、
        hoteltype: [],
        // 酒店设施、
        assets: [],
        // 酒店品牌、
        brands: []
      },
      // 酒店筛选项
      hotelOptions: null,
      // 控制撤销条件请求次数
      cancelFlag: false,
      // 控制筛选组件初始加载多次请求
      controlFilter: 0
    }
  },

  methods: {
    //   获取酒店筛选选项
    async getHotelOption() {
      const { data } = await this.$axios.get('/hotels/options')

      //  处理数据,将每一项配置中添加是否被选中属性
      let result = {}
      for (const key in data.data) {
        result[key] = data.data[key].map(item => ({
          ...item,
          check: false
        }))
      }
      // console.log(result);
      this.hotelOptions = result
    },

    // 价格改变事件
    handlePriceChange(val) {
      console.log(val);
      // 将价格信息传递给父组件
      this.$emit('filter-event', this.filterQuery)
    },

    // 取消筛选条件
    cancelFilter() {
      this.cancelFlag = true
      this.filterQuery.price = 4000

      // 重新获取酒店配置项即可
      this.getHotelOption()
      this.$emit('filter-event', {
        price: 4000,
        hotellevel: [],
        hoteltype: [],
        assets: [],
        brands: []
      })

      setTimeout(() => {
        this.cancelFlag = false
      }, 1000)
    },

    // 向首页传递过滤参数
    sendFilterQuery() {
      if (this.cancelFlag) return
      this.$emit('filter-event', this.filterQuery)
    }
  },

  computed: {
    // 等级下拉选择标签说明
    levelChoose() {
      if (this.filterQuery.hotellevel.length === 0) return '不限'
      if (this.filterQuery.hotellevel.length === 1) return this.filterQuery.hotellevel[0].name
      return `已选${this.filterQuery.hotellevel.length}项`
    },

    // 类型下拉选择标签说明
    typeChoose() {
      if (this.filterQuery.hoteltype.length === 0) return '不限'
      if (this.filterQuery.hoteltype.length === 1) return this.filterQuery.hoteltype[0].name
      return `已选${this.filterQuery.hoteltype.length}项`
    },

    // 酒店设施选择标签说明
    assetsChoose() {
      if (this.filterQuery.assets.length === 0) return '不限'
      if (this.filterQuery.assets.length === 1) return this.filterQuery.assets[0].name
      return `已选${this.filterQuery.assets.length}项`
    },

    // 酒店品牌选择标签说明
    brandsChoose() {
      if (this.filterQuery.brands.length === 0) return '不限'
      if (this.filterQuery.brands.length === 1) return this.filterQuery.brands[0].name
      return `已选${this.filterQuery.brands.length}项`
    }
  },

  watch: {
    // 深度监听住宿等级是否选中状态
    'hotelOptions.levels': {
      deep: true,
      handler(val) {
        // 限制组件初次加载不向父组件传递过滤参数
        if (this.controlFilter < 4) return this.controlFilter++
        // 筛选选中的等级
        this.filterQuery.hotellevel = this.hotelOptions.levels.filter(item => item.check)
        // console.log(this.filterQuery.hotellevel);
        // 将过滤信息传递给父组件
        this.sendFilterQuery()
      }
    },

    // 深度监听住宿类型是否选中状态
    'hotelOptions.types': {
      deep: true,
      handler() {
        if (this.controlFilter < 4) return this.controlFilter++
        // 筛选选中的等级
        this.filterQuery.hoteltype = this.hotelOptions.types.filter(item => item.check)
        // console.log(this.filterQuery.hoteltype);
        // 将过滤信息传递给父组件
        this.sendFilterQuery()
      }
    },

    // 深度监听酒店设施是否选中状态
    'hotelOptions.assets': {
      deep: true,
      handler() {
        if (this.controlFilter < 4) return this.controlFilter++
        // 筛选选中的等级
        this.filterQuery.assets = this.hotelOptions.assets.filter(item => item.check)
        // console.log(this.filterQuery.assets);
        // 将过滤信息传递给父组件
        this.sendFilterQuery()
      }
    },

    // 深度监听酒店品牌是否选中状态
    'hotelOptions.brands': {
      deep: true,
      handler() {
        if (this.controlFilter < 4) return this.controlFilter++
        // 筛选选中的等级
        this.filterQuery.brands = this.hotelOptions.brands.filter(item => item.check)
        // console.log(this.filterQuery.brands);
        // 将过滤信息传递给父组件
        this.sendFilterQuery()
      }
    }
  },

  created() {
    //   挂载数据
    this.getHotelOption()
  }
}
</script>

<style lang="less" scoped>
.list_filter {
  border: 1px solid #ddd;
  padding: 5px 0px;
  color: #666;

  .filter_item .el-col {
    border-right: 1px solid #ddd;
    padding: 5px 20px;

    // &:first-child {
    //   padding-left: 0;
    // }

    &:last-child {
      border-right: none;
      // padding-right: 0;
    }

    .price_title {
      font-size: 14px;
      color: #666;
    }

    .item_title {
      font-size: 14px;
      color: #666;
    }

    .el-dropdown {
      display: flex;
      height: 38px;

      .el-dropdown-link {
        display: flex;
        width: 100%;
        flex: 1;
        cursor: pointer;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  .cancel_filter {
    display: flex;
    align-items: center;
  }
}
</style>